layui.config({
    base: CXL.ctxPath + '/layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'form','laydate'], function(){
    var form = layui.form;
    var admin = layui.admin;
    var table = layui.table;
    var laydate = layui.laydate;

    var $ = layui.$;

    $(document).ready(function (){
        var carName = $('#carName').val();
        var happenEndDateStr = $('#happenEndDateStr').val();
        var happenStartDateStr = $('#happenStartDateStr').val();

        var param = {carName:carName,happenEndDateStr:happenEndDateStr,happenStartDateStr:happenStartDateStr};
        drawStatChart(param);
    });
    var Page = {
        tableId: 'alarm-info',
        url:CXL.ctxPath + '/sys/alarm/listInfo',
        editPageUrl:CXL.ctxPath + '/sys/alarm/idKey',
        initColumn:function(){
            return [[
                {type : 'numbers',title : '序号',width:'3%'},
                {type : 'idKey',hide:true,width:'3%'},
                {field:'carName',title:'告警位置',width:'12%'},
                {field:'type',title:'告警类型',width:'23%'},
                {field:'errMsg',title:'告警详情',width:'25%'},
                {field:'status',title:'信息状态',width:'10%',templet:"#online-status"},
                {field:'createDate',title:'发生时间',width:'16%'},
                {title:'操作',width:'8%',toolbar: '#sys-alarm-tool'}
            ]];

        },
    };


    function drawStatChart(params){
        var myChart = echarts.init(document.getElementById('statEchart'));
        myChart.clear();
        var names = [];
        var mydata = [];

        $.ajax({
            type:"post",
            async: true,
            url: CXL.ctxPath + '/sys/alarm/getStatData',
            data:params,
            success: function (datas) {
                var data = datas.obj;
                if(data == null || data.length == 0){
                    return;
                }

                for (var i=0;i<data.length;i++){
                    names.push(data[i].name);
                    mydata[i] = {value: data[i].scale, name: data[i].name};
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '告警信息扇形统计表',
                        left: 'center',
                        textStyle: { //文字样式
                            color: "white", //文字颜色
                            fontSize: 24, //文字大小
                            align: "center" //居中
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle: { //文字样式
                            color: "white", //文字颜色
                            fontSize: 12, //文字大小
                            align: "center" //居中
                        },
                        data: names
                    },
                    series: [
                        {
                            name: '告警信息扇形统计表',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: mydata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);
            }
        });
    }


    table.render({
        elem:'#' + Page.tableId,
        url:Page.url,
        height:'500px',
        page:true,
        limits:[3,5,7,10,20,30],
        limit:10,
        autoSort:false,
        where: Page.where,
        cols:Page.initColumn()
    });


    laydate.render({
        elem:'#happenEndDateStr',
    });

    laydate.render({
        elem:'#happenStartDateStr',
    });



    Page.resetAction = function (){
        $(".layui-input").val('');
        Page.searchAction();
    };

    Page.searchAction = function (){
        var carName = $('#carName').val();
        var status = $('#status').val();
        var happenEndDateStr = $('#happenEndDateStr').val();
        var happenStartDateStr = $('#happenStartDateStr').val();

        var param = {carName:carName,happenEndDateStr:happenEndDateStr,happenStartDateStr:happenStartDateStr,status:status};
        drawStatChart(param);
        table.render({
            elem:'#' + Page.tableId,
            url:Page.url,
            height:'500px',
            page:true,
            limits:[3,5,7,10,20,30],
            limit:10,
            autoSort:false,
            where: param,
            cols:Page.initColumn()
        });

    };


    //编辑任务类型
    table.on('tool(' + Page.tableId + ')', function(obj){
        //获得当前行数据
        var data = obj.data;


        var idKey = data.idKey;
        //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var layEvent = obj.event;
        //编辑操作
        if(layEvent === 'edit'){
            Page.openEdit(idKey);
        }
    });



    Page.openEdit = function (idKey){
        layer.open({
            type : 2,
            title : '告警信息详情',
            shadeClose : true,
            shade : 0.8,
            area: ['500px', '500px'],
            content : Page.editPageUrl + "?idKey=" +idKey ,
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#form-btn-save");
                submit.click();

            },
        });
    };


    $('#btnSearch').click(function (){
        Page.searchAction();
    });


    $('#btnReset').click(function (){
        Page.resetAction();
    });







})